<template>
    <div>
        <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" format="YYYY-MM-DD HH:mm:ss" class="datePicker"></el-date-picker>
        <!-- 双左 -->
        <el-button @click="decreaseDate" class="jiantou">
          <svg t="1689236716686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2986" width="16" height="16">
            <path d="M558.99 204.98L465 110.99 64 512l401.01 401.01L559 819.02 251.97 512l307.02-307.02z m401.01 0l-93.98-93.99L465.01 512l401.01 401.01L960 819.02 652.98 512 960 204.98z"
              p-id="2987" fill="#8c8c8c"></path>
          </svg>
        </el-button>
        <!-- 单左 -->
        <el-button @click="leftDate" class="jiantou">
          <svg t="1689236989589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3901" width="16" height="16">
            <path
              d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
              p-id="3902" fill="#8c8c8c"></path>
          </svg>
        </el-button>
        <!-- 单右 -->
        <el-button @click="rightDate" class="jiantou">
          <svg t="1689237082849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4200" width="16" height="16">
            <path
              d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
              p-id="4201" fill="#8c8c8c"></path>
          </svg>
        </el-button>
        <!-- 双右 -->
        <el-button @click="increaseDate" class="jiantou">
          <svg t="1689236647625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2543" width="16" height="16">
            <path d="M465.01 204.98L559 110.99 960 512 558.99 913.01 465 819.02 772.03 512 465.01 204.98z m-401.01 0l93.98-93.99L558.99 512 157.98 913.01 64 819.02 371.02 512 64 204.98z"
              p-id="2544" fill="#8c8c8c"></path>
          </svg>
        </el-button>
        <span @click="changeDate(0)" class="time">今日</span>
        <span @click="changeDate(3)" class="time">近3日</span>
        <span @click="changeDate(7)" class="time">近7日</span>
        <span @click="changeDate(30)" class="time">近30日</span>
    </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import {  ref, watch } from "vue";
//收集日历数据
const startDate = ref(dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'));
const endDate = ref(dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
const dateRange = ref<any>([startDate.value, endDate.value]);

const pickerOptions = {
  // 禁用未来日期
  disabledDate(time: any) {
    return time.getTime() > Date.now();
  }
};
// 监听dateRange的变化，并保持日期范围为三天或七天
watch(dateRange, () => {
  const diff = dayjs(dateRange.value[1]).diff(dateRange.value[0], 'day');
  if (diff > 2) {
    // 如果日期范围超过三天，则调整endDate为startDate加两天
    const newEndDate = dayjs(dateRange.value[0]).add(2, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss');
    endDate.value = newEndDate;
  }
});

const changeDate = (days: any) => {
  const newStartDate = dayjs().subtract(days, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
  dateRange.value = [startDate.value, endDate.value];
};
// 点击左双箭头
const decreaseDate = () => {
  const newStartDate = dayjs(startDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  const newEndDate = dayjs(endDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = newEndDate;
  dateRange.value = [startDate.value, endDate.value];
}
// 点击右双箭头
const increaseDate = () => {
  const newStartDate = dayjs(startDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  const newEndDate = dayjs(endDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = newEndDate;
  dateRange.value = [startDate.value, endDate.value];
};
// 点击左单箭头
const leftDate = () => {
  const newStartDate = dayjs(startDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  dateRange.value[0] = newStartDate;
}
// 点击右单箭头
const rightDate = () => {
  const newEndDate = dayjs(endDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  endDate.value = newEndDate;
  dateRange.value[1] = newEndDate;
}
</script>

<style scoped>

</style>